<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/*头部*/
			.mui-bar-nav { background: #fdd100;}
			.mui-pull-left { color: #000;}
			/*内容区*/
			.mui-content { background: #fff;}
			.mui-content h2 { padding: 50px 0 30px; text-align: center; background: #999; color: #fff; font-weight: normal; margin: 0;}
			.mui-content h2 p { line-height: 40px; font-size: 12px; color: #fff;}
			.mui-content ul { margin: 0; padding: 0 ;}
			.mui-content li { margin: 0; padding: 0 ; list-style: none; border-bottom: 1px #eee solid; padding:10px; position: relative; overflow: hidden;}
			.mui-content li img { width: 120px;  float: left; margin-right: 10px;}
			.mui-content li h3 { font-size: 14px; line-height: 20px; height: 20px; padding: 0; margin: 0; color: #333; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 
			.mui-content li p { font-size: 12px; line-height: 20px; color: #999; padding: 0; margin: 0;} 
			.mui-content li i { position: absolute; right: 0; bottom: 0; z-index: 2; font-style: normal;color: #fff; font-size: 12px; line-height: 16px; text-align: center; padding-right: 3px; }
			.mui-content li i:after { content: ""; width: 0;height: 0;position:absolute ; right: 0; bottom: 0; z-index: -1; border-bottom: 26px solid #ddd;border-left: 26px solid transparent; }
			.mui-content li:first-child i:after { border-bottom: 26px solid rgba(255,102,0,1); }
			.mui-content li:nth-child(2) i:after { border-bottom: 26px solid rgba(255,102,0,0.8); }
			.mui-content li:nth-child(3) i:after { border-bottom: 26px solid rgba(255,102,0,0.5); }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">榜单</h1>
		</header>
		<div class="mui-content">
			<h2>
				鲜花榜
				<p>上榜规则：根据视频当日收到的鲜花量打榜</p>
			</h2>
			<ul>
				
				
			</ul>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			var index = 1;
			for(var i=1;i<11;i++){
				$(".mui-content ul").append('<li>\
				<a href="../page/video.html">\
					<i>'+index+'</i>\
					<img src="../img/pic2.jpg"/>\
					<h3>心悦广场舞《的飞洒地方的是》发大水发大水发大水</h3>\
					<p>心悦广场舞</p>\
					<p>一个月内鲜花数：11689</p>\
				</a>\
			</li>');
				index++;
			}
			var winH = $(window).height(); //页面可视区域高度  
            $(window).scroll(function() {  
                var pageH = $(document.body).height();  
                var scrollT = $(window).scrollTop(); //滚动条top  
                var aa = (pageH - winH - scrollT) / winH;  
                if (aa < 0.02 && index<50) {  
                    for(var i=1;i<11;i++){
						$(".mui-content ul").append('<li>\
							<a href="../page/video.html">\
								<i>'+index+'</i>\
								<img src="../img/pic2.jpg"/>\
								<h3>心悦广场舞《的飞洒地方的是》发大水发大水发大水</h3>\
								<p>心悦广场舞</p>\
								<p>一个月内鲜花数：11689</p>\
							</a>\
						</li>');
						index++;
					}
                }  
            });  
			mui.plusReady(function() {
				
			});


		</script>
	</body>

</html>